<template>
	<view class="certmain">
		<uni-nav-bar shadow title="搜索结果" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="container">
			<view class="headerTabs">
				<text v-for="(i,n) in level1" :class="current ==n?'activeNow':''"
					@click="ChangeOneLevel(i,n)">{{i}}</text>
			</view>
			<view class="content">
				<view class="teacon">
					<view class="tealeft" v-for="(item,index) in level3"
						@tap="toMainInf(item)">
						<view class="timg">
							<image :src="item.image" mode=""></image>
						</view>
						<text class="tt1">{{item.name}}</text>
						<view class="tinfo">
							<!-- <text  class="yy">{{item.info}}</text> -->
							<view>
								<text class="yan" style="width: 24rpx;">
									<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode="">
									</image>
								</text>
								<text>{{item.show_number}}</text>
							</view>
						</view>
					</view>
					<view v-show="level3.length==0" style="text-align: center;  margin: 20rpx;" class="">
						暂无内容
					</view>
				</view>
			</view>


		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				idcard: '',
				id: '1',
				AllList: [],

				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				level1: ['课程套餐',	'拓展练习',	'教学过程',	'精品微课',	'免费学习'],
				level3List: [],
				level3: [],
				keywords:'',
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				},
				currentPage:1
				
			}
		},
		onReady() {
		
		},
		onLoad(options) {
			this.keywords=options.keywords
			this.loadSearch()
		},
		onReachBottom() {
				if(this.status=='nomore'){
					return
				}
				this.currentPage++
				this.loadSearch()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			ChangeOneLevel(i,n){
				this.current=n
				this.currentPage=1
				this.status='loading'
				this.level3=[]
				this.loadSearch()
				
			},
			loadSearch() {
				uni.showLoading({
					title:'加载中'
				})
				this.$api.get({
					url: '/index/search',
					data:{
					search:	this.keywords,
					page:this.currentPage,
					limit:10,
					type:this.current+1
					},
					success: res => {
						console.log(res)
						// this.level3=res.list
					
							this.level3=[...this.level3,...res.list]
						
						
						this.status='loadMore'
						if(res.count<10){
							this.status='nomore'
						}
						uni.hideLoading()
					},
					fail: error => {
						uni.hideLoading()
						console.log(error)
					}
				})

			},
			toMainInf(item){
				let url 
				switch (this.current){
					case 0:
					url=`/pages/teacher/FreeStudyVideo?id=${item.id}&name=${item.name}&type=courses`;
					break;
					case 1:
					url=`/pages/teacher/PracticeVideo?id=${item.id}`;
					break;
					case 2:
					url=`/pages/teacher/ProcessVideo?id=${item.id}`;
					break;
					case 3:
					url=`/pages/teacher/CourseVideo?id=${item.id}`;
					break;
					case 4:
					url=`/pages/teacher/FreeStudyVideo?id=${item.id}&name=${item.name}&type=study`;
					break;
					
				}
				uni.navigateTo({
					url:url
				})
			},
		
		}
	}
</script>

<style lang="scss">
	.certmain {


		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}

		.container {
			.teainfo {
				padding: 0 30rpx;

				.teatitle {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.t1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.t2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #777777;
					}
				}

			}
		}
	}

	.headerTabs {
		padding: 30rpx;
		white-space: nowrap;
		overflow: scroll;

		text {
			margin-right: 50rpx;
		}

		.activeNow {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #D6483D;
			position: relative;
		}

		.activeNow::after {
			width: 60rpx;
			height: 10rpx;
			background: #FFC1BC;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			content: '';
			clear: both;
			position: absolute;
			bottom: -10rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

	}
	
	.teacon {
		display: flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		flex-wrap: wrap;

	
		
	}
	.tealeft,
	.tearight {
		width: 336rpx;
		height: 300rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		opacity: 1;
		margin: 16rpx;
		.timg {
	
			image {
				width: 316rpx;
				height: 176rpx;
			}
	
			width: 316rpx;
			height: 176rpx;
			// background-color: pink;
			margin: 0 auto;
			margin-top: 10rpx;
		}
	
		.tt1 {
			display: block;
			margin-left: 10rpx;
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #333333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: 400;
		}
	
		.tinfo {
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			margin-top: 14rpx;
	
			.yan,
			.san {
				display: inline-block;
				width: 16rpx;
				height: 20rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.san {
				margin-left: 30rpx;
			}
	
			.yy {
				width: 100rpx;
				height: 36rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				background: rgba(231, 186, 119, 1);
				text-align: center;
				padding: 3rpx;
			}
		}
	}
</style>
